<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 500px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow-y: auto;
            padding: 10px;
        }

        .message {
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            word-break: break-all;
        }

        .message p {
            margin: 0;
        }

        .message .sender {
            font-weight: bold;
        }

        .message .timestamp {
            font-size: 12px;
            color: #999;
        }

        .message.sent {
            background-color: #d1f7d1; /* 浅绿色背景，可根据需要自行修改颜色 */
        }

        .input-container {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .input-container textarea {
            width: 100%; /* 修改输入框宽度为100% */
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            outline: none;
            resize: vertical;
            margin-right: 10px;
        }

        .input-container button {
            margin-left: 10px; /* 增加按钮的左边距 */
            padding: 5px 15px; /* 增加按钮的内边距 */
            width: 80px; /* 增加按钮的宽度 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }

        .input-container button.send {
            background-color: #4caf50; /* 修改发送按钮颜色为浅绿色 */
            color: #fff;
        }

        .input-container button.delete {
            background-color: #ff4f4f; /* 修改删除按钮颜色为浅红色 */
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="chat-container" id="chatContainer"></div>
    <div class="input-container">
        <textarea id="messageInput" placeholder="输入消息..."></textarea>
        <button id="sendButton" class="send">发送</button>
        <button id="deleteButton" class="delete">删除</button> <!-- 新增删除按钮 -->
    </div>

    <script>
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const deleteButton = document.getElementById('deleteButton'); // 获取删除按钮

        const socket = new WebSocket('ws://127.0.0.1:8765');

        socket.addEventListener('open', () => {
            // 弹出窗口获取昵称
            const nickname = prompt('请输入您的昵称：');
            const nicknameData = {
                nickname: nickname
            };
            socket.send(JSON.stringify(nicknameData));
        });

        socket.addEventListener('message', (event) => {
            const message = JSON.parse(event.data);
            console.log(message);
            showMessage(message);
        });

        sendButton.addEventListener('click', () => {
            const content = messageInput.value.trim();
            if (content !== '') {
                const messageData = {
                    content: content
                };
                socket.send(JSON.stringify(messageData));
                messageInput.value = '';
            }
        });

        deleteButton.addEventListener('click', () => {
            const deleteMessage = {
                content: '/delete' // 发送删除消息给后端
            };
            socket.send(JSON.stringify(deleteMessage));
            location.reload(); // 删除后刷新页面
        });

        function showMessage(message) {
            const isSentClass = message.isSent ? 'sent' : 'received';
            const messageElement = document.createElement('div');
            messageElement.classList.add('message', isSentClass);

            const senderElement = document.createElement('p');
            senderElement.classList.add('sender');
            senderElement.textContent = message.nickname;

            const contentElement = document.createElement('p');
            contentElement.textContent = message.content;

            const timestampElement = document.createElement('p');
            timestampElement.classList.add('timestamp');
            timestampElement.textContent = message.timestamp;

            messageElement.appendChild(senderElement);
            messageElement.appendChild(contentElement);
            messageElement.appendChild(timestampElement);

            chatContainer.appendChild(messageElement);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    </script>
</body>
</html>
